<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>

      <div class="infor-right" v-if="ctnIndex == 0" v-loading="loading">
        <div class="account">常见问题</div>
        <div class="question" v-for="item in list" :key="item.helpId">
          <div class="questionText">{{ item.helpTitle }}</div>
          <div class="answerText">{{ item.helpContent }}</div>
        </div>
      </div>
      <div
        class="infor-right ideaContent"
        v-if="ctnIndex == 1"
        v-loading="loading"
      >
        <div class="account">常见问题</div>
        <div class="idea-top">意见反馈</div>
        <div class="ideBottom">
          <div class="ideaIpt">
            <div class="ideaTitle">问题和意见</div>
            <div class="ideaRight">
              <textarea
                name
                id
                cols="30"
                rows="10"
                class="iptClass"
                placeholder="简单描述您要反馈的问题和意见..."
                v-model="content"
              ></textarea>
              <div class="ideaPrompt">
                <div class="ideaText">
                  <div class="ideaImg">
                    <img src="../assets/imgs/ideaImg.png" alt />
                  </div>
                  <div class="ideaPicText">
                    上传图片（图片大小请控制在2M以内）
                    <input
                      type="file"
                      name
                      id
                      class="selFile"
                      @change="addImg($event)"
                    />
                  </div>
                </div>
                <div class="ideaDomName" v-if="fileName != ''">
                  <div class="picUpload">已上传：</div>
                  <div class="domName">{{ fileName }}</div>
                  <div class="domDelete" @click="delImg">
                    <img src="../assets/imgs/ideaDelete.png" alt />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ideaIpt">
            <div class="ideaTitle">联系方式</div>
            <div class="ideaRight">
              <input
                type="text"
                placeholder="手机或邮箱都可以哦"
                class="iptClass iptHeight"
                maxlength="32"
                v-model="phone"
              />
              <div class="revise" @click="submit" v-if="isSubmit">提交</div>
              <div class="revise defaultBuuton" @click="submit" v-else>
                已提交
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="infor-right" v-if="ctnIndex == 2" v-loading="loading">
        <div class="account">关于我们</div>
        <div class="question" v-for="item in agreeList" :key="item.id">
          <div class="questionText aboutUs" @click="goAgree(item.agree)">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="infor-right" v-if="ctnIndex == 3" v-loading="loading">
        <div class="account">联系我们</div>
        <div class="question">
          <div class="questionText">客服邮箱</div>
          <div class="answerText">{{ foot.email }}</div>
        </div>
        <div class="question">
          <div class="questionText">商务合作</div>
          <div class="answerText">{{ foot.business }}</div>
        </div>
        <div class="question">
          <div class="questionText">QQ群</div>
          <div class="answerText">{{ foot.address }}</div>
        </div>
      </div>
    </div>

    <nav-footer ref="child"></nav-footer>
  </div>
</template>
<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
export default {
  data() {
    return {
      tags: [
        { name: "热门问题" },
        { name: "意见反馈" },
        { name: "关于我们" },
        { name: "联系我们" },
      ],
      list: [{}, {}, {}],
      defaultIndex: 0,
      ctnIndex: 0,
      selectedOptions: [],
      value1: "",
      show: true,
      res: "",
      count: 0,
      loading: true,
      content: "",
      phone: "",
      fileName: "",
      serverUrl: "",
      isSubmit: true,
      foot: "",
      agreeList: [],
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
  },
  created() {
    this.init(1);
  },
  methods: {
    init(page) {
      this.loading = true;
      this.$fetch(`/laiwen/feedback/help/hlist`, {}).then((res) => {
        this.loading = false;
        this.res = res;
        this.list = res.list;
        this.delList(res, "list");
      });
    },

    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
      if (e == 2) {
        this.getAgree();
      }
      if (e == 3) {
        this.contactUs();
      }
    },
    // 初始化用户协议
    async getAgree() {
      const res = await this.$fetch(`/laiwen/agreement/frontend/agree`);
      this.agreeList = res.list;
    },
    goAgree(ctn) {
      this.$router.push({
        path: `/agreeDetail`,
        query: { agree: ctn },
      });
    },
    //提交
    submit() {
      if (this.content == "" || this.phone == "") {
        this.$message.warning("请补全信息");
        return false;
      }
      let feedbackContent = this.content;
      let number = this.phone;
      let img = this.serverUrl;
      let obj = {
        feedbackContent,
        img,
        number,
      };
      this.$post(`/laiwen/feedback/feed/save`, obj).then((res) => {
        if ((res.msg = "success")) {
          this.$message.success("提交成功");
          this.isSubmit = false;
        }
      });
    },
    addImg(e) {
      // if (!isSubmit) {
      //   this.$message.warning("提交后不可操作");
      //   return;
      // }
      let fileLen = e.target.files.length;
      console.log(fileLen);
      for (let i = 0; i < fileLen; i++) {
        let file = e.target.files[i];
        console.log(file);
        this.fileName = file.name;
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          this.url = e.target.result;
          //上传到服务器
          this.$post(`/laiwen/upload/file/baseimage`, this.url).then((res) => {
            this.serverUrl = res.downUrl;
          });
        };
      }
    },
    delImg() {
      // if (!this.isSubmit) {
      //   this.$message.warning("提交后不可操作");
      //   return;
      // }
      this.serverUrl = "";
      this.fileName = "";
    },
    //联系我们
    contactUs() {
      this.$fetch(`/laiwen/foot/frontend/foot`).then((res) => {
        this.foot = res.foot;
      });
    },
    //分页方法
    changePage(size) {
      this.init(size);
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped lang="scss">
@import "../assets/scss/mixin";
.aboutUs {
  cursor: pointer;
}
.ideaContent {
  height: 5.62rem !important;
  flex-direction: column;
}
.iptHeight {
  height: 0.42rem !important;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.infor-content {
  flex: 1 0 auto;
  @include wh(13.86rem, 6.72rem);
  margin-top: 0.68rem;
  @include fc(space-between);
  .infor-right {
    background: white;
    position: relative;
    @include wh(11.02rem, 6.74rem);
    flex-direction: column;
    align-items: center;
    @include borderRadius(0.05rem);
    .account {
      @include pa(-0.44rem, 0);
      @include fontAll(0.14rem, #303030, PingFang SC);
    }
    .question {
      @include wh(10.62rem, auto);
      border-bottom: 0.01rem solid #f5f5f5;
      @include fontAll(0.16rem, #282828, PingFang SC);
      margin-left: 0.3rem;
      flex-direction: column;
      .questionText {
        margin-top: 0.26rem;
        margin-bottom: 0.14rem;
      }
      .answerText {
        @include wh(9.72rem, auto);
        box-sizing: border-box;
        padding: 0.11rem;
        background: #f4f4f4;
        @include fontAll(0.14rem, #999999, PingFang SC);
        margin-bottom: 0.26rem;
        @include borderRadius(0.05rem);
      }
    }
    .idea-top {
      @include wh(100%, 0.72rem);
      box-sizing: border-box;
      padding-left: 0.3rem;
      @include fontAll(0.14rem, #303030, PingFang SC);
      @include fa(center);
      border-bottom: 0.01rem solid #f5f5f5;
    }
    .ideBottom {
      flex: 1;
      box-sizing: border-box;
      padding: 0.32rem 1.02rem 0rem 0.28rem;
      .ideaIpt {
        width: 100%;
        margin-bottom: 0.32rem;
        @include fc(space-between);
        .ideaTitle {
          @include fontAll(0.14rem, #bbbbbb, PingFang SC);
          margin-top: 0.11rem;
        }
        .ideaRight {
          @include wh(8.68rem, auto);
          .iptClass {
            @include wh(100%, 1.22rem);
            appearance: none;
            box-sizing: border-box;
            padding: 0.11rem;
            background: #f4f4f4;
            outline: none;
            border: none;
            @include fontAll(0.14rem, #999999, PingFang SC);

            //放大缩小组件
            resize: none;
            @include borderRadius(0.05rem);
            ::placeholder {
              @include fontAll(0.14rem, #999999, PingFang SC);
            }
          }
          .ideaPrompt {
            @include wh(100%, 0.2rem);
            display: flex;
            margin-top: 0.12rem;
            @include fontAll(0.14rem, #8e8e8e, PingFang SC);
            .ideaText {
              @include wh(auto, 0.2rem);
              display: flex;
              margin-right: 0.32rem;
              .ideaImg {
                width: 0.22rem;
                height: 0.18rem;
                margin-right: 0.19rem;
              }
              .ideaPicText {
                cursor: pointer;
                position: relative;
                .selFile {
                  position: absolute;
                  left: 0;
                  top: 0;
                  opacity: 0;
                  cursor: pointer;
                }
              }
            }
            .ideaDomName {
              display: flex;
              align-items: center;
              .domName {
                @include fontAll(0.14rem, #ff6e04, PingFang SC);
              }
              .domDelete {
                @include wh(0.1rem, 0.1rem);
                margin-left: 0.12rem;
                cursor: pointer;
              }
            }
          }
          .revise {
            @include wh(0.72rem, 0.38rem);
            background: rgba(255, 189, 61, 1);
            opacity: 1;
            @include borderRadius(0.05rem);
            @include fontAll(0.14rem, #ffffff, PingFang SC);
            text-align: center;
            line-height: 0.38rem;
            margin-top: 0.21rem;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
